<template>
  <div class="container">
    <div class="common-layout">
      <el-container>
        <el-aside class="container-aside">
          <!-- 练习室组件 -->
          <el-card class="box-card-lefttop">
            <el-collapse class="collapse-side" @change="handleChange">
              <el-collapse-item title="练习室">
                <router-link to="/practice"
                  ><span class="collapse-side-center"
                    >我的练习室</span
                  ></router-link
                >
              </el-collapse-item>
            </el-collapse>
          </el-card>
          <!-- 右侧信息 -->
          <div class="box-card-leftdown">
            <div class="box-card-leftdown-table">
              <router-link to="/center/MediaCache">
                <div class="box-card-leftdown-divone">缓存</div>
              </router-link>
              <div class="box-card-leftdown-divone" @click="open">音频库</div>
              <router-link to="/center/Collections">
                <div class="box-card-leftdown-divone">收藏</div>
              </router-link>
              <router-link to="/center/View_records">
                <div class="box-card-leftdown-divone">历史</div>
              </router-link>
            </div>
          </div>
        </el-aside>

        <Training />
      </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Tabs from "./Tabs.vue";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const handleChange = (val: string[]) => {
  console.log(val);
};
const open = () => {
  ElMessageBox.alert('请打开中舞网APP,点击"练习室"-"音频库"中查看', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确定",
  });
};
</script>
<style lang="less">
.container {
  .common-layout {
    width: 1200px;
    margin: 0 auto;
    .container-aside {
      width: 200px;
      .box-card-lefttop {
        width: 170px;
        margin-top: 20px;

        .collapse-side {
          border: 1px solid transparent;
          a {
            text-decoration: none;
          }
          .router-link-active {
            text-decoration: none;
          }
          .collapse-side-center {
            margin-left: 30px;
            color: #f93684;
          }
        }
      }
      .box-card-leftdown {
        box-shadow: 2px 2px 2px 1px rgba(183, 183, 183, 0.2);
        border: 1px solid #e7e8e9;
        margin-top: 10px;
        width: 170px;
        border-radius: 2%;
        background-color: #fff;
        .box-card-leftdown-table {
          a {
            text-decoration: none;
          }
          .router-link-active {
            text-decoration: none;
          }
          div {
            height: 15px;
            font-size: 14px;
            color: #111;
            padding: 17px 21px;
            cursor: pointer;
            position: relative;
            display: block;
            text-decoration: none;
            border-left: 5px solid transparent;
          }
          :hover {
            // box-sizing: border-box;
            border-left: 5px solid #f93684;
            transition: background-color 0.3s ease;
          }
        }
      }
    }
  }
}
</style>

<!-- 去除lementUI组件的样式 -->
<style lang="less">
.el-collapse-item__header,
.el-collapse-item__wrap {
  border-bottom: 0px;
}
</style>
